<script>
import Base from './Base'

export default {
  name: 'ChartTree',
  mixins: [Base],
  data() {
    return {
      defaultOption: {
        series: []
      },
      defaultSeries: {
        type: 'tree',
        data: [],
        top: '1%',
        right: '20%',
        bottom: '1%',
        layout: 'orthogonal',
        left: '20%',
        orient: 'LR',
        roam: true,
        edgeForkPosition: '50%',
        edgeShape: 'polyline',// curve  polyline
        expandAndCollapse: true,
        initialTreeDepth: 2,
        label: {
          backgroundColor: '#fff',
          position: 'left',
          verticalAlign: 'middle',
          align: 'right'
        },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        }
      }
    }
  },

  computed: {
    option: function() {
      let series = [], [name, value] = this.dataset.dimensions

      const replace = (list) => {
        return list.reduce((r, c) => {
          let children = []
          if (c.children) children = replace(c.children)
          r.push({
            name: c[name],
            value: c[value] || 0,
            children
          })
          return r
        }, [])
      }

      let data = replace(this.dataset.source)

      series.push({
        ...this.defaultSeries,
        data
      })

      return {
        ...this.defaultOption,
        series
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
